<template>
  <div class="login">
    <div class="login_form">
      <div class="login_con">
        <span style="font-size:24px;margin: 10px 0px">欢迎登录</span>
        <el-form ref="form" :model="loginForm" style="width:80%;">
          <!-- 输入用户名/邮箱 -->
          <el-form-item>
            <el-input
              placeholder="请输入用户名/邮箱"
              v-model="loginForm.account">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <!-- 输入密码 -->
          <el-form-item>
            <el-input
              placeholder="请输入密码"
              v-model="loginForm.password"
              show-password>
              <i slot="prefix" class="el-input__icon el-icon-edit"></i>
            </el-input>
          </el-form-item>

          <!-- 验证码 -->
          <el-form ref="form" :model="loginForm" :inline="true">
            <el-form-item >
              <el-input
                placeholder="请输入验证码"
                v-model="code">
              </el-input>
            </el-form-item>
            <el-form-item>
              <vue-captcha ref="captcha" :captcha.sync="vertify" @on-change="handleChange"></vue-captcha>
            </el-form-item>
          </el-form>

          <!-- 登录/注册按钮 -->
          <el-form-item style="text-align: center"> 
            <el-button style="width:45%;" type="primary" @click="login">登录</el-button>
            <el-button style="width:45%;"  @click="toRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import VueCaptcha from "vue-captcha-code";
export default {
  data() {
    return {
      vertify: "",
      code: '',
      loginForm: {
        account: '',
        password: '',
      }
    }
  },
  components:{
    VueCaptcha
  },
  mounted() {
    // localStorage.clear();
    let chatUserInfo = JSON.parse(localStorage.getItem('chatUserInfo'))
    if (null === chatUserInfo) return;
    if (chatUserInfo.isLogin) {
      this.$store.commit('setChatUserInfo', chatUserInfo)
      this.$router.push("/chat")
    }
  },
  methods: {
    // 跳转注册界面
    toRegister(){
      this.$router.push("/register")
    },
    // 登录
    async login(){
      if(this.code != this.vertify) this.$message.error('验证码错误');
      else {
        this.$axios.post('http://localhost:3000/user/login', this.loginForm)
          .then(res => {
            console.log(res);
            this.$message({
              message: res.data.msg,
              type: res.data.msg == '登录成功' ? 'success' : 'error',
            });
            if(res.data.msg == '登录成功'){
              let chatUserInfo = {
                isLogin: true,
                username: res.data.body.username,
                account: res.data.body.account,
              }
              localStorage.setItem('chatUserInfo', JSON.stringify(chatUserInfo));
              this.$store.commit('setChatUserInfo', chatUserInfo)
              this.$router.push("/chat")
            }
          })
      }
    },

    // 打印验证码
    handleChange(code) {
      console.log('code: ', code);
    },
  }
}
</script>

<style >
.login{
  width: 100%;
  height: 100%;
  color: #666666;
  font-family: "宋体";

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login_form{
  background: rgb(255, 255, 255, 0.85);
  width: 45%;
  height: 55%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .36), 0 0 12px rgba(0, 0, 0, .12);

  display: flex;
  justify-content: center;
  align-items: center;
}
.login_con{
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>